<template>
  <div class="custom-tab-page">
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities" :key="index">
        <div>
          <el-button type="primary" link>
            {{ activity.created_user }}
          </el-button>
          {{ activity.action_name }}
          [ {{ activity.target_name }}]
        </div>
        <div class="tab8-time">
          {{ activity.created_at }}
        </div>
      </el-timeline-item>
    </el-timeline>
    <div style="margin-top: 10px; display: flex" v-if="activities.length > 0">
      <el-pagination :small="true" v-model:currentPage="currentPage" v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div class="no-data" v-if="activities.length == 0">暂无记录</div>
  </div>
</template>
<script setup>
import { logsApi } from "@/plugins/api/customer/manage/my";
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
});
// 合同变更记录
let activities = ref([]);
// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
function getData() {
  logsApi({
    page: currentPage.value,
    pageSize: pageSize.value,
    id: props.dataInfo.id,
  }).then((res) => {
    activities.value = res.list;
    total.value = res.page.total;
  });
}
function initFun() {
  console.log(props.dataInfo);
  activities.value = [];
  getData();
}
defineExpose({
  initFun,
});
</script>
<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;
  height: calc(100vh - 260px);
  position: relative;

  .tab8-text {
    margin-top: 5px;
    background: #fafafa;
    padding: 10px;
    font-size: 14px;
  }

  .no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #c9c3c3;
  }

  .tab8-time {
    margin-top: 5px;
    color: #e4750e;
  }
}
</style>
